<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-24 22:18:34
 * @LastEditTime: 2019-11-05 10:21:18
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="tui-editor" :data="data" :getTuiContent="getTuiContent">
    <div id="editorSection"></div>
  </div>
</template>

<script>
import Editor from 'tui-editor'; /* ES6 */
export default {
    name: 'TuiEditor',
    props: ['data','getTuiContent'],
    data: () => {
      return {
          instance:null
      }
    },
    mounted() {
        this.instance = new Editor({
            el: document.querySelector('#editorSection'),
            initialEditType: 'markdown',
            previewStyle: 'vertical',
            usageStatistics: false,
            height: (document.body.clientHeight -50) + "px"
        });
        this.instance.setHtml(this.data);
    },
    components: {
    },
    methods: {
      getContent() {
        return this.instance.getHtml();
        // this.$emit("getTuiContent", content);
      },
      setContent(str) {
        return this.instance.setHtml(str);
      }
    }

}
</script>

<style lang="scss" scoped>
.tui-editor {
  position: relative;
}
</style>